<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
          捕获器接收三个参数: 目标对象、要查询的属性、代理对象
         */

         const target = {
            name: 'xiaomi'
         }

         const handler = {
            get(trapTarget, property, receiver) {
                console.log(trapTarget === target) // true
                console.log(property)  // name
                console.log(receiver === proxy)  // true
            }
         }

         const proxy = new Proxy(target, handler)

         proxy.name

         // 有了这些行为，就可以重建捕获器方法的原始行为
         const target1 = {
            name: 'xiaomi'
         }

         const handler1 = {
            get(trapTarget, property, receiver) {
                return trapTarget[property]
            }
         }

         const proxy1 = new Proxy(target1, handler1)
         console.log(proxy1.name) // xiaomi

         const target2 = {
            name: 'xiaomi',
            age: 12
         }

         const handler2 = {
            get(trapTarget, property, receiver) {
                let decoration = ''
                if (property == 'name') {
                    decoration = '!!!'
                }

                return trapTarget[property] + decoration
            }
         }

         const proxy2 = new Proxy(target2, handler2)
         console.log(proxy2.name) // xiaomi!!!
         console.log(proxy2.age) // 12
    </script>
</body>
</html>